<template>
  <div class="register">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="form"
    >
      <span class="title">创建账户</span>
      <el-form-item label="您的用户名" prop="username">
        <el-input placeholder="请输入您的用户名" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="您的昵称" prop="name">
        <el-input placeholder="请输入您的昵称" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="您的密码" prop="password">
        <el-input
          type="password"
          placeholder="密码至少为6位字符"
          v-model="form.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input
          type="password"
          placeholder="再次输入密码"
          v-model="form.checkPassword"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱地址">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-radio v-model="form.radio" label="2">用户</el-radio>
        <el-radio v-model="form.radio" label="1">商家</el-radio>
      </el-form-item>
      <div style="text-align: center;">{{msg}}</div>
      <div class="button">
        <el-button type="primary" @click="can ? submitForm('form') : toLogin()">{{can ? current[0] : current[1]}}</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    const checkCheckPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请再次输入密码'))
      }
      setTimeout(() => {
        if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }, 100)
    }
    const checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    return {
      msg: '',
      can: true,
      current: ['创建', '登录'],
      form: {
        username: '',
        name: '',
        password: '',
        checkPassword: '',
        email: '',
        radio: '2'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 18, message: '密码6-18位', trigger: 'blur' }
        ],
        checkPassword: [
          { validator: checkCheckPassword, required: true, trigger: 'blur' }
        ],
        email: [{ validator: checkEmail, required: true, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const list = {
            userId: null,
            username: this.form.username,
            name: this.form.name,
            balance: 2000,
            type: this.form.radio,
            email: this.form.email,
            password: this.form.password
          }
          this.$http.post('users', JSON.stringify(list)).then((res) => {
            console.log(res)
            if (res.status === 200) {
              if (!res.data.status) {
                this.msg = '创建成功，请登录'
                this.can = false
              } else {
                this.msg = res.data.message
              }
            }
          }).catch((err) => {
            this.msg = err.response.data.message
          })
          alert('submit!')
        } else {
          console.log('error submit!!')
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    toLogin () {
      this.$router.push('/Login')
    }
  }
}
</script>

<style lang="less" scoped>
.register {
  width: 100%;
  height: 90%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgb(226, 158, 133);
  .form {
    width: 30%;
    height: 80%;
    margin: 30px auto;
    background-color: aliceblue;
    padding: 30px;
    border-radius: 20px;
    .title {
      color: #303133;
      display: inline-block;
      text-align: center;
      width: 100%;
      height: 60px;
      font-size: 20px;
      line-height: 63px;
    }
    .button {
      width: 60%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
